add task solution#6278
Conversation
1Vladislav13
commented
Jun 23, 2026
1Vladislav13
commented
- DEMO LINK
- TEST REPORT LINK
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am requesting changes because there is still a critical requirement violation around data-qa attributes that blocks full task completion. The task explicitly requires data-qa="card-hover" only on the Buy link inside the first card and also says to remove old data-qa attributes everywhere. In your src/index.html, all subsequent cards’ Buy links still have data-qa="card-hover" (for example around lines 166–169, 198–201, 230–233, etc.), which means the test hook is duplicated and old attributes were not fully removed. To fix this, keep data-qa="card" on the first card and data-qa="card-hover" only on the first card’s Buy link, and remove data-qa="card-hover" from every other Buy link and any other legacy data-qa attributes in the project. Aside from this, your BEM + SCSS structure, grid layout, hover behaviors, and use of variables look solid and aligned with the checklist. Once you clean up the extra data-qa usages so they match the specification exactly, your solution will be ready to pass.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| <a | ||
| href="#" | ||
| class="card__button" | ||
| data-qa="card-hover" | ||
| > | ||
| buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="iMac apple" | ||
| /> | ||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
| <span class="card__code">Product code: 195434</span> | ||
| <div class="card__reviews"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <span class="card__reviews-text">Reviews: 5</span> | ||
| </div> | ||
| <div class="card__price-info"> | ||
| Price: | ||
| <span class="card__price-coast">$2,199</span> | ||
| </div> | ||
| <a | ||
| href="#" | ||
| class="card__button" | ||
| data-qa="card-hover" | ||
| > | ||
| buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="iMac apple" | ||
| /> | ||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
| <span class="card__code">Product code: 195434</span> | ||
| <div class="card__reviews"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <span class="card__reviews-text">Reviews: 5</span> | ||
| </div> | ||
| <div class="card__price-info"> | ||
| Price: | ||
| <span class="card__price-coast">$2,199</span> | ||
| </div> | ||
| <a | ||
| href="#" | ||
| class="card__button" | ||
| data-qa="card-hover" | ||
| > | ||
| buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="iMac apple" | ||
| /> | ||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
| <span class="card__code">Product code: 195434</span> | ||
| <div class="card__reviews"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <span class="card__reviews-text">Reviews: 5</span> | ||
| </div> | ||
| <div class="card__price-info"> | ||
| Price: | ||
| <span class="card__price-coast">$2,199</span> | ||
| </div> | ||
| <a | ||
| href="#" | ||
| class="card__button" | ||
| data-qa="card-hover" | ||
| > | ||
| buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="iMac apple" | ||
| /> | ||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
| <span class="card__code">Product code: 195434</span> | ||
| <div class="card__reviews"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <span class="card__reviews-text">Reviews: 5</span> | ||
| </div> | ||
| <div class="card__price-info"> | ||
| Price: | ||
| <span class="card__price-coast">$2,199</span> | ||
| </div> | ||
| <a | ||
| href="#" | ||
| class="card__button" | ||
| data-qa="card-hover" | ||
| > | ||
| buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="iMac apple" | ||
| /> | ||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
| <span class="card__code">Product code: 195434</span> | ||
| <div class="card__reviews"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <span class="card__reviews-text">Reviews: 5</span> | ||
| </div> | ||
| <div class="card__price-info"> | ||
| Price: | ||
| <span class="card__price-coast">$2,199</span> | ||
| </div> | ||
| <a | ||
| href="#" | ||
| class="card__button" | ||
| data-qa="card-hover" | ||
| > | ||
| buy | ||
| </a> | ||
| </div> | ||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="iMac apple" | ||
| /> | ||
| <h3 class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h3> | ||
| <span class="card__code">Product code: 195434</span> | ||
| <div class="card__reviews"> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <span class="card__reviews-text">Reviews: 5</span> | ||
| </div> | ||
| <div class="card__price-info"> | ||
| Price: | ||
| <span class="card__price-coast">$2,199</span> | ||
| </div> | ||
| <a | ||
| href="#" | ||
| class="card__button" | ||
| data-qa="card-hover" |
There was a problem hiding this comment.
You correctly added data-qa="card" to the first card and data-qa="card-hover" to its Buy link, but all subsequent cards also have data-qa="card-hover" on their Buy links. The description requires adding data-qa="card-hover" specifically to the link Buy inside the first card, and also says to remove old data-qa attributes. This violates that requirement because the extra data-qa on other cards are not needed and are considered leftover attributes.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your solution is approved because it fully meets the functional and technical requirements of the catalog task. The page structure is semantic with <header> and <main class="catalog">, the cards are laid out using CSS Grid with the correct 1/2/3/4 column behavior at the specified breakpoints, and the cards maintain the required fixed 200px width, gaps, and paddings. All hover interactions behave as described: cards scale smoothly, titles, nav links, and the Buy button change to the correct colors with a shared 300ms transition, satisfying the smooth-hover checklist items. BEM is consistently applied to the Header, Card, and Stars blocks, SCSS is used throughout, and shared sizes/colors/transition are extracted into variables, matching the technical constraints. The data-qa attributes are configured exactly as required—on the 4th nav link, the first card, and the first card’s Buy button—with legacy attributes removed. Overall, there are no critical blockers or missing features relative to the task description or checklist, and the implementation is clean and aligned with the spec. Nicely done bringing everything into compliance with the requirements.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
